import React from 'react';
import './homebrand.scss'
import axios from 'axios'

export default class Homebrand extends React.Component{
    constructor(props){
        super(props)
        this.state={
            HomeBrand:[]
        }
    }
    componentDidMount(){
        axios.get('https://apipc-xiaotuxian-front.itheima.net/home/brand?limit=10').then((res)=>{
            if(res.data){
                this.setState({
                    HomeBrand:res.data.result
                })
            }
        })
    }
    mgebtn(){}
    pwdbtn(){}
    render(){
        const {HomeBrand} = this.state
        return(
            <div className='homebrand'>
                <div id="app">
            <div className="center">
                <div className="head">
                    <h3>
                        热门品牌
                        <small>国际经典 品质保证</small>
                    </h3>
                    <span>
                        <button onClick={this.mgebtn.bind(this)}>左</button>
                        <button onClick={this.pwdbtn.bind(this)}>右</button>
                    </span>
                </div>
                <div className="box" >
                    <ul ref="wa">
                        {
                            HomeBrand&&HomeBrand.map((A,index)=>{
                                return (
                                    <li key={index}>
                                        <img src={A.picture} alt="" />
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
        </div>
            </div>
        )
    }
}